<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 讲师配置 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-files-box">
                <div class="form-file header">讲师入驻设置</div>
                <div class="form-files">
                    <div class="form-file">
                        <span class="form-label">讲师入驻申请</span>
                        <span class="form-set f13">{{ lecturerSetList.join == 0 ? '关闭' : '开启' }}</span>
                        <span class="form-set-detail f13">是否开启讲师入驻申请</span>
                        <span class="form-edit">
                            <el-switch
                                @change="join($event)"
                                v-model="form.teacher_config.join"
                                :active-value="1"
                                :inactive-value="0"
                                :width="53"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                            >
                            </el-switch>
                        </span>
                    </div>
                    <div class="form-file">
                        <span class="form-label">讲师入驻审核</span>
                        <span class="form-set f13">{{ lecturerSetList.verify == 0 ? '关闭' : '开启' }}</span>
                        <span class="form-set-detail f13">是否开启讲师入驻申请审核</span>
                        <span class="form-edit">
                            <el-switch
                                @change="verify($event)"
                                v-model="form.teacher_config.verify"
                                :active-value="1"
                                :inactive-value="0"
                                :width="53"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                            >
                            </el-switch>
                        </span>
                    </div>
                    <div class="form-file">
                        <span class="form-label">讲师入驻协议</span>
                        <span class="form-set f13">{{ lecturerSetList.agreement == '' ? '未设置' : '已设置' }}</span>
                        <span class="form-set-detail f13">讲师入驻协议设置</span>
                        <span class="form-edit">
                            <el-button @click="agreement_set" type="success" size="mini" round>设置</el-button>
                        </span>
                    </div>
                </div>
            </div>

            <div class="form-files-box">
                <div class="form-file header">讲师佣金设置</div>
                <div class="form-files">
                    <div class="form-file">
                        <span class="form-label">分佣开关</span>
                        <span class="form-set f13">{{ lecturerSetList.charges_status == 0 ? '关闭' : '开启' }}</span>
                        <span class="form-set-detail f13">是否启用讲师发布课程分佣</span>
                        <span class="form-edit">
                            <el-switch
                                @change="charges_status($event)"
                                v-model="form.teacher_config.charges_status"
                                :active-value="1"
                                :inactive-value="0"
                                :width="53"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                            >
                            </el-switch>
                        </span>
                    </div>
                    <div class="form-file">
                        <span class="form-label">讲师佣金比例设置</span>
                        <span class="form-set f13">已设置</span>
                        <span class="form-set-detail f13">讲师发布的课程售卖佣金比例设置，请输入相应百分比，单位：%</span>
                        <span class="form-edit">
                            <el-button @click="charges_set" type="success" size="mini" round>设置</el-button>
                        </span>
                    </div>
                </div>
            </div>

            <div class="form-files-box">
                <div class="form-file header">提现设置</div>
                <div class="form-files">
                    <div class="form-file">
                        <span class="form-label">提现开关</span>
                        <span class="form-set f13">{{ withdrawSet.status == 0 ? '关闭' : '开启' }}</span>
                        <span class="form-set-detail f13">是否允许讲师提现，可临时关闭</span>
                        <span class="form-edit">
                            <el-switch
                                @change="withdraw_status($event)"
                                v-model="form.withdraw_config.status"
                                :active-value="1"
                                :inactive-value="0"
                                :width="53"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                            >
                            </el-switch>
                        </span>
                    </div>
                    <div class="form-file">
                        <span class="form-label">每日提现次数设置</span>
                        <span class="form-set f13">{{ withdrawSet.number == '' ? '未设置' : `已设置 ${withdrawSet.number} 次` }}</span>
                        <span class="form-set-detail f13">同一分销商每日可提现次数设置</span>
                        <span class="form-edit">
                            <el-button @click="withdrawal_times_set" type="success" size="mini" round>设置</el-button>
                        </span>
                    </div>
                    <div class="form-file">
                        <span class="form-label">提现金额设置</span>
                        <span class="form-set f13">{{ (withdrawSet.low_fee && withdrawSet.high_fee) == '' ? '未设置' : `已设置 ${withdrawSet.low_fee + '|' + withdrawSet.high_fee}` }}</span>
                        <span class="form-set-detail f13">讲师提现时的最低额和最高额设置</span>
                        <span class="form-edit">
                            <el-button @click="withdrawal_money_set" type="success" size="mini" round>设置</el-button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 所有设置弹框 -->
        <!-- 入驻协议 -->
        <el-dialog title="讲师入驻协议" @close="cancel" :visible.sync="agreement_set_dialog" width="50%">
            <el-form ref="form" label-width="125px">
                <el-form-item label="完整内容">
                    <quill-editor v-model="form.teacher_config.agreement"></quill-editor>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 佣金比例 -->
        <el-dialog title="讲师入驻协议" @close="cancel" :visible.sync="charges_set_dialog" width="30%">
            <el-form ref="form" label-width="100px">
                <el-form-item label="佣金比例">
                    <el-input v-model="form.teacher_config.charges"></el-input>
                    <span class="note">讲师发布的课程售卖佣金比例设置，单位：%</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 提现次数 -->
        <el-dialog title="每日提现次数设置" :visible.sync="withdrawal_times_dialog" width="30%">
            <el-form ref="form" label-width="100px">
                <el-form-item label="每日提现次数">
                    <el-input v-model="form.withdraw_config.number"></el-input>
                    <span class="note">同一讲师每日最多可提现次数。（注：需小于等于微信支付次数设置）</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 提现金额 -->
        <el-dialog title="提现金额设置" :visible.sync="withdrawal_money_dialog" width="30%">
            <el-form ref="form" label-width="100px">
                <el-form-item label="最低额度">
                    <el-input v-model="form.withdraw_config.low_fee"></el-input>
                </el-form-item>
                <el-form-item label="最高额度">
                    <el-input v-model="form.withdraw_config.high_fee"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { setListData, lecturerSetData } from '../../api/index';
export default {
    // name: 'lecturer_set',
    data() {
        return {
            form: {
                teacher_config: {
                    join: '',
                    verify: '',
                    agreement: '',
                    charges_status: '',
                    charges: ''
                },
                withdraw_config: {
                    status: '',
                    number: '',
                    low_fee: '',
                    high_fee: '',
                }
            },
            lecturerSetList: {},
            withdrawSet: {},
            agreement_set_dialog: false,
            charges_set_dialog: false,
            withdrawal_times_dialog: false,
            withdrawal_money_dialog: false
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            setListData().then((res) => {
                this.lecturerSetList = res.data.teacher_config;
                this.withdrawSet = res.data.withdraw_config;

                this.form.teacher_config.join = res.data.teacher_config.join;//是否讲师入驻申请
                this.form.teacher_config.verify = res.data.teacher_config.verify;//是否讲师入驻审核
                this.form.teacher_config.agreement = res.data.teacher_config.agreement;//讲师入驻协议

                this.form.teacher_config.charges_status = res.data.teacher_config.charges_status; //分佣开关
                this.form.teacher_config.charges = res.data.teacher_config.charges;//讲师佣金比例设置

                this.form.withdraw_config.status = res.data.withdraw_config.status;//提现开关
                this.form.withdraw_config.number = res.data.withdraw_config.number;//提现次数
                this.form.withdraw_config.low_fee = res.data.withdraw_config.low_fee;//提现下限
                this.form.withdraw_config.high_fee = res.data.withdraw_config.high_fee;//提现上限
            });
        },
        join($event) {
            this.form.teacher_config.join = $event;
            lecturerSetData(this.form).then((res) => {
                if (res.code == 1) {
                    if ($event == false) {
                        this.$message({
                            type: 'error',
                            message: '关闭成功!'
                        });
                    } else {
                        this.$message({
                            type: 'success',
                            message: '开启成功!'
                        });
                    }
                    setTimeout(() => {
                         this.getData();
                        //location.reload();
                    }, 200);
                }
            });
        },
        verify($event) {
            this.form.teacher_config.verify = $event;
            lecturerSetData(this.form).then((res) => {
                if (res.code == 1) {
                    if ($event == false) {
                        this.$message({
                            type: 'error',
                            message: '关闭成功!'
                        });
                    } else {
                        this.$message({
                            type: 'success',
                            message: '开启成功!'
                        });
                    }
                    setTimeout(() => {
                        this.getData();
                        //location.reload();
                    }, 200);
                }
            });
        },
        charges_status($event) {
            this.form.teacher_config.charges_status = $event;
            lecturerSetData(this.form).then((res) => {
                if (res.code == 1) {
                    if ($event == false) {
                        this.$message({
                            type: 'error',
                            message: '关闭成功!'
                        });
                    } else {
                        this.$message({
                            type: 'success',
                            message: '开启成功!'
                        });
                    }
                    setTimeout(() => {
                        this.getData();
                        //location.reload();
                    }, 200);
                }
            });
        },
        withdraw_status($event) {
            this.form.withdraw_config.status = $event;
            lecturerSetData(this.form).then((res) => {
                if (res.code == 1) {
                    if ($event == false) {
                        this.$message({
                            type: 'error',
                            message: '关闭成功!'
                        });
                    } else {
                        this.$message({
                            type: 'success',
                            message: '开启成功!'
                        });
                    }
                    setTimeout(() => {
                        this.getData();
                        //location.reload();
                    }, 200);
                }
            });
        },
        agreement_set() {
            this.agreement_set_dialog = true;
        },
        charges_set() {
            this.charges_set_dialog = true;
        },
        withdrawal_times_set() {
            this.withdrawal_times_dialog = true;
        },
        withdrawal_money_set() {
            this.withdrawal_money_dialog = true;
        },
        //取消
        cancel() {
            this.agreement_set_dialog = false;
            this.charges_set_dialog = false;
            this.withdrawal_times_dialog = false;
            this.withdrawal_money_dialog = false;
        },
        //确定
        save() {
            lecturerSetData(this.form).then((res) => {
                if (res.code == 1) {
                    this.cancel();
                    this.$message.success('设置成功');
                    setTimeout(() => {
                        this.getData();
                        //location.reload();
                    }, 200);
                }
            });
        }
    }
};
</script>

<style scoped>
.form-files-box {
    line-height: 1;
    margin-bottom: 50px;
}
.form-files-box .form-file {
    display: flex;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #e8e9eb;
    color: #4c4c4c;
    line-height: 40px;
}
.form-label,
.form-set,
.form-set-detail {
    flex: 0.3;
    font-size: 14px;
}
.f13 {
    font-size: 13px;
    color: #999;
}
.form-edit {
    flex: 0.1;
    text-align: right;
}
.form-files-box .form-file.header {
    background-color: #f0f0f0;
    font-weight: 600;
    color: #999;
    line-height: 1;
}
.note {
    font-size: 13px;
    color: #999;
}
</style>

<style>
.ql-container {
    height: 200px;
}
</style>